<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div class="pd btns">
        <button onclick="recopen()">打开录音</button>
        <button onclick="recclose()">关闭录音</button>
    </div>
    <div class="pd btns">
        <button onclick="recstart()">录制</button>
        <button onclick="recstop()">停止</button>

        <button onclick="recpause()" style="margin-left:60px">暂停</button>
        <button onclick="recresume()">继续</button>
    </div>

    <input type="text" id="app">

    <div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block"
        class="recwave"></div>

    <!--加载可选扩展库-->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="./recorder.wav.min.js"></script>
    <script src="./waveview.js"></script>
    <script>
        // 手机调试
        javascript: (function () {
            var script = document.createElement('script');
            script.src = "//cdn.jsdelivr.net/npm/eruda";
            document.body.appendChild(script);
            script.onload = function () {
                eruda.init()
            }
        })();

        var rec,
            voiceDataX,
            voiceDataY;


        //打开录音
        function recopen() {
            var wave;
            rec = Recorder({
                type: 'wav', //格式
                bitRate: 16, //比特率
                sampleRate: 16000, //采样率
                onProcess: function (buffers, level, time, sampleRate) {
                    wave.input(buffers[buffers.length - 1], level, sampleRate);
                }
            });
            rec.open(function () { //打开麦克风授权获得相关资源

                wave = Recorder.WaveView({
                    elem: ".recwave"
                });

            }, function (msg, isUserNotAllow) { //用户拒绝未授权或不支持
                console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
            });
        }

        // 关闭录音
        function recclose() {
            if (rec) {
                rec.close(); //释放录音资源
                console.log("录音已关闭");
            }

        }


        // 开始录音
        function recstart() {
            if (rec) {
                rec.start(); //开始录音
                console.log('录制中');
            } else {
                alert("请打开录音")
            }

        }

        //停止录音
        function recstop() {

            rec.stop(function (blob, duration) { //到达指定条件停止录音
                console.log(URL.createObjectURL(blob), "时长:" + duration / 1000 + "s");
                rec.close(); //释放录音资源
                //已经拿到blob文件对象想干嘛就干嘛：立即播放、上传

                var reader = new FileReader();
                reader.readAsDataURL(blob);

                reader.onloadend = function () {
                    $.ajax({
                        url: "https://test.cloudindoormap.com:81/sys/speechRecognitionBase", //上传接口地址
                        type: "POST",
                        data: {
                            base64: (/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result) || [])[1] //录音文件内容，后端进行base64解码成二进制
                        },
                        success: function (v) {
                            // if(JSON.parse(v).data.result.split('"')[0] == 'ERROR'){
                            //     console.log('语音时长过长或者录音质量不高识别失败请重试');
                            // }else{
                            //     if(JSON.parse(v).data.result.split('"')[1].indexOf('?') != -1){
                            //         voiceData = JSON.parse(v).data.result.split('"')[1].split('?')[0]
                            //     }
                                
                            // }

                            voiceDataX = JSON.parse(v).x.split('"')[1].split('�')[0];
                            voiceDataY = JSON.parse(v).y.split('"')[1].split('�')[0]

                            console.log('v :', JSON.parse(v));
                            console.log('v1 :', JSON.parse(v).x.split('"'));
                            console.log('v2 :', JSON.parse(v).x.split('"')[1].split('�'));
                            voiceDataX.split("").forEach(element => {
                                console.log('elementX :', element);
                            });
                            voiceDataY.split("").forEach(element => {
                                console.log('elementy :', element);
                            });

                        },
                        error: function (s) {
                            console.error("上传失败", s);
                        }
                    });
                };

            }, function (msg) {
                console.log("录音失败:" + msg);
            });
        }

        // 暂停录音
        function recpause() {
            if (rec) {
                rec.pause();
                console.log('已暂停');
            } else {
                alert("请打开录音")
            }
        };


        // 继续录音
        function recresume() {
            if (rec) {
                rec.resume();
                console.log('继续录音中...');
            } else {
                alert("请打开录音")
            }
        };




        // {


        //     var TestApi = "/test_request"; //用来在控制台network中能看到请求数据，测试的请求结果无关紧要
        //     var rec = Recorder();
        //     rec.open(function () {
        //         rec.start();
        //         setTimeout(function () {
        //             rec.stop(function (blob, duration) {
        //                 //-----↓↓↓以下才是主要代码↓↓↓-------

        //                 //本例子假设使用jQuery封装的请求方式，实际使用中自行调整为自己的请求方式
        //                 //录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传
        //                 var api = TestApi;

        //                 /***方式一：将blob文件转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传***/
        //                 var reader = new FileReader();
        //                 reader.readAsDataURL(blob);
        //                 reader.onloadend = function () {
        //                     $.ajax({
        //                         url: "http://192.168.1.6:8080/TPAudit/sys/speechRecognitionBase" //上传接口地址
        //                             ,
        //                         type: "POST",
        //                         data: {
        //                             mime: blob
        //                             .type, //告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
        //                             upfile_b64: (/.+;\s*base64\s*,\s*(.+)$/i.exec(
        //                                     reader.result) || [])[
        //                                 1] //录音文件内容，后端进行base64解码成二进制
        //                             //...其他表单参数
        //                         },
        //                         success: function (v) {
        //                             console.log("上传成功", v);
        //                         },
        //                         error: function (s) {
        //                             console.error("上传失败", s);
        //                         }
        //                     });
        //                 };

        //                 /***方式二：使用FormData用multipart/form-data表单上传文件***/
        //                 var form = new FormData();
        //                 form.append("upfile", blob,
        //                 "recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
        //                 //...其他表单参数
        //                 $.ajax({
        //                     url: api, //上传接口地址
        //                     type: "POST",
        //                     contentType: false, //让xhr自动处理Content-Type header，multipart/form-data需要生成随机的boundary
        //                     processData: false, //不要处理data，让xhr自动处理    
        //                     data: form,
        //                     success: function (v) {
        //                         console.log("上传成功", v);
        //                     },
        //                     error: function (s) {
        //                         console.error("上传失败", s);
        //                     }
        //                 });

        //                 //-----↑↑↑以上才是主要代码↑↑↑-------
        //             }, function (msg) {
        //                 console.log("录音失败:" + msg);
        //             });
        //         }, 3000);
        //     }, function (msg) {
        //         console.log("无法录音:" + msg);
        //     });

















        // }
    </script>
</body>

</html>